<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>部门人员数量统计页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%@ include file="/WEB-INF/view/common.jsp"%>

<link
	href="${path }/resources/css/plugins/bootstrap-table/bootstrap-table.min.css"
	rel="stylesheet">
<link href="${path }/resources/css/animate.css" rel="stylesheet">
<link href="${path }/resources/css/style.css?v=4.1.0" rel="stylesheet">

</head>
<body class="gray-bg">
	<div class="panel-body">
        <div class="row" id="did" style="width:1200px;height:600px;"></div>

	</div>

    <!--echarts-->
    <script src="${path}/resources/js/echarts.js"></script>
	<script type="text/javascript">
		$(function () {
			init();
		});

		var init = function () {
			$.ajax({
				url:"deptEmployee",
				dataType:"json",
				type:"post",
				success:function(res){
					if(res.success){
						var slist =res.list ;
						var xdata=[];
						var ydata =[];
						for (var i = 0;  i< slist.length; i++) {
							xdata[i]=slist[i].dname;
							ydata[i]={value:slist[i].num,name:slist[i].dname};
						}

						$(function(){//文档就绪函数
							//基于准备好的dom，初始化echarts实例
							var myChart = echarts.init(document.getElementById('did'));

							option = {
								title: {
									text: '部门员工数量统计图',
									left: 'center'
								},
								tooltip: {
									trigger: 'item',
									formatter: '{a} <br/>{b} : {c} ({d}%)'
								},
								legend: {
									orient: 'vertical',
									left: 'left',
									data: xdata
								},
								series: [
									{
										name: '部门名称',
										type: 'pie',
										radius: '55%',
										center: ['50%', '60%'],
										data: ydata,
										emphasis: {
											itemStyle: {
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
											}
										}
									}
								]
							};
							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);
						});
					}else{
						alert("处理失败!");
					}
				}
			});
		};
	</script>

</body>
</html>